<%= turbo_frame_tag Avo::MODAL_FRAME_ID do %>
  <%= form_with scope: 'fields',
    url: @url,
    local: true,
    data: {
      turbo_frame: :_top
    } do |form| %>
    <%= render Avo::ModalComponent.new do |c| %>
      <% c.with_heading do %>
        <%= t 'avo.choose_item', item: @field.name.singularize.downcase %>
      <% end %>

      <div class="flex-1 flex items-center justify-center px-0 lg:px-8 text-lg mt-8 mb-12">
        <div class="flex-1 flex flex-col items-center justify-center px-0 md:px-24 text-base">
          <div class="w-full">
            <% if @field.is_searchable? %>
              <%= field_wrapper stacked: true,
                field: @field,
                view: Avo::ViewInquirer.new("edit"),
                form:,
                index: 0,
                resource: @resource,
                label_for: @field.id,
                label: @field.name.singularize.downcase do %>
                <%= render Avo::Pro::SearchableAssociations::AutocompleteComponent.new form: form,
                  classes: input_classes("w-full"),
                  field: @field,
                  model_key: @field.target_resource&.model_key,
                  foreign_key: 'related_id',
                  resource: @resource,
                  view: Avo::ViewInquirer.new(:new)
                %>
              <% end %>
            <% else %>
              <%= avo_edit_field :related_id,
                as: :select,
                form: form,
                name: @field.name.singularize,
                options: options_for_select(@options, selected: nil, disabled: t("avo.more_records_available")),
                include_blank: t('avo.choose_an_option'),
                stacked: true,
                classes: 'w-full'
              %>
            <% end %>
            <%#
              It is important to render this hidden field to allow selective rendering of the turbo frame.
              (e.g. in the case of "Attach and Attach Another")

              Without this, the entire page will be reloaded when the form is submitted.
            %>
            <%= hidden_field_tag :turbo_frame, params[:turbo_frame] %>
            <% @attach_fields&.each_with_index do |field, index| %>
              <%= render(Avo::Items::SwitcherComponent.new(
                resource: @related_resource,
                item: field,
                index: index + 1,
                view: @view,
                form: form,
                field_component_extra_args: {
                  stacked: true,
                classes: 'w-full'}
              )) %>
            <% end %>
          </div>
        </div>
      </div>

      <% c.with_controls do %>
        <%= a_button 'data-action': 'click->modal#close', type: :button, size: :sm, style: :outline, color: :gray do %>
          <%= t('avo.cancel') %>
        <% end %>
        <%= a_button type: :submit, value: :attach_another, style: :outline, color: :green, size: :sm do %>
          <%= t('avo.attach_and_attach_another') %>
        <% end %>
        <%= a_button type: :submit, style: :primary, color: :green, size: :sm do %>
          <%= t('avo.attach') %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>
